<template>
  <div>
    <Modal
      :title="title"
      :ok-text="okText"
      :cancel-text="cancelText"
      v-model="dialogVisiable"
      v-bind="$attrs"
      @on-ok="onOkClick"
      @on-cancel="onCalcelClick"
    >
      <!-- 内容 -->
      <slot></slot>
    </Modal>
  </div>
</template>

<script lang="ts">
const EMITS_ON_ON_CLICK = 'onOkClick'
const EMITS_ONCANCEL_CLICK = 'onCalcelClick'
</script>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  // 是否显示
  visible: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 确定按钮文字
  okText: {
    type: String,
    default: '确定'
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: '取消'
  }
})

// 单向数据流 拷贝visiable
let dialogVisiable = ref(props.visible)

// 分发事件
const emits = defineEmits([
  'update:visible',
  EMITS_ON_ON_CLICK,
  EMITS_ONCANCEL_CLICK
])

// 监听visible
watch(
  () => props.visible,
  (newVal) => {
    dialogVisiable.value = newVal
  }
)

// 监听dialogVisiable
watch(
  () => dialogVisiable.value,
  (val) => {
    emits('update:visible', val)
  }
)

// 确定
const onOkClick = () => {
  emits(EMITS_ON_ON_CLICK)
}

// 取消
const onCalcelClick = () => {
  emits(EMITS_ONCANCEL_CLICK)
}
</script>

<style scoped></style>
